<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <flexbox justify="space-between">
                <a-radio-group v-model:value="type" button-style="solid" @change="handleChange">
                    <a-radio-button value="1">业务需求</a-radio-button>
                    <a-radio-button value="2">产品需求</a-radio-button>
                </a-radio-group>
                <a-input-search placeholder="请输入需求名称" style="width: 300px" enter-button @search="handleSearch" />
            </flexbox>
            <div class="margin-t-8">
                <custom-table autoResize size="small" :loading="loading" rowKey="id" :pagination="paginationConfig" :columns="tableColumns" :data-source="list" @change="handleTableChange">
                    <template #relate="{ record }">
                        <a @click="handleReview(record.id, 1)">查看</a>
                    </template>
                    <template #action="{ record }">
                        <a @click="handleEdit(record.id)">编辑</a>
                        <a-divider type="vertical" />
                        <a @click="handleReview(record.id, 2)">查看</a>
                    </template>
                </custom-table>
            </div>
        </div>
        <add-system-modal ref="addSystemModalRef" @success="getList" />
        <relate-modal ref="relateModalRef" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import AddSystemModal from './components/AddSystemModal.vue';
import RelateModal from './components/RelateModal.vue';
import { useRouter } from 'vue-router';
import { CustomTable } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: {
        CustomTable,
        AddSystemModal,
        RelateModal
    },
    setup() {
        const router = useRouter();
        const addSystemModalRef = ref<any>();
        const relateModalRef = ref<any>();
        const tableColumns = computed(() => {
            let columns: any = [];
            if (state.type === '1') {
                columns = [
                    {
                        title: '需求名称',
                        dataIndex: 'requestName'
                    },
                    {
                        title: '关系图',
                        dataIndex: 'relate',
                        width: 150,
                        slots: { customRender: 'relate' }
                    },
                    {
                        title: '相关系统图',
                        dataIndex: '',
                        key: 'action',
                        width: 150,
                        slots: { customRender: 'action' }
                    }
                ];
            } else {
                columns = [
                    {
                        title: '需求名称',
                        dataIndex: 'requireName'
                    },
                    {
                        title: '关系图',
                        dataIndex: 'relate',
                        width: 150,
                        slots: { customRender: 'relate' }
                    },
                    {
                        title: '相关系统图',
                        dataIndex: '',
                        key: 'action',
                        width: 150,
                        slots: { customRender: 'action' }
                    }
                ];
            }
            return columns;
        });
        const state = reactive<any>({
            loading: false,
            type: '1',
            list: [],
            requireName: '',
            paginationConfig: {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            }
        });
        const handleChange = (val) => {
            state.paginationConfig = {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            };
            getList();
        };
        const handleTableChange = (val) => {
            state.paginationConfig = val;
            getList();
        };
        const handleEdit = (id) => {
            unref(addSystemModalRef).open({
                id,
                type: state.type
            });
        };
        const showDetail = ({ id, reportName }) => {
            router.push({
                path: '/energyManage/analysisReport/list',
                query: {
                    id,
                    reportName
                }
            });
        };
        const handleSearch = (val) => {
            state.requireName = val;
            getList();
        };
        const handleReview = (id, relateType) => {
            unref(relateModalRef).open(id, relateType, state.type);
        };
        const getList = async () => {
            state.loading = true;
            const query = {
                selectType: 'link',
                requireName: state.requireName,
                pageSize: state.paginationConfig.pageSize,
                pageNum: state.paginationConfig.current
            };
            const requestApi = state.type === '1' ? api.pmpRequestInfoModel.selectPage : api.productRequireModel.selectPage;
            const { success, moule, totalCount } = await requestApi(query);
            if (success) {
                state.list = [...moule];
                state.paginationConfig.total = totalCount;
            }
            state.loading = false;
        };
        getList();
        return {
            addSystemModalRef,
            relateModalRef,
            tableColumns,
            ...toRefs(state),
            handleChange,
            showDetail,
            handleSearch,
            handleEdit,
            getList,
            handleTableChange,
            handleReview
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    padding: 12px 24px;
    background: #fff;
}
</style>